<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
      <el-breadcrumb-item>供应商配置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div slot="header">
        <span>编辑供应商</span>
      </div>
      <!-- 表单 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
      >
        <el-form-item label="供应商全称" prop="full_name">
          <el-input v-model="addForm.full_name"></el-input>
        </el-form-item>
        <el-form-item label="供应商简称" prop="short_name">
          <el-input v-model="addForm.short_name"></el-input>
        </el-form-item>
        <el-form-item label="供应商类型" prop="type">
          <el-select
            v-model="addForm.type"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              key="1"
              label="内部服务商"
              :value="typeof addForm.type == 'string' ? 1 + '' : 1"
            >
            </el-option>
            <el-option
              key="2"
              label="外部服务商"
              :value="typeof addForm.type == 'string' ? 2 + '' : 2"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算方式" prop="clear_type">
          <el-select
            v-model="addForm.clear_type"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              key="1"
              label="现结"
              :value="typeof addForm.clear_type == 'string' ? 1 + '' : 1"
            >
            </el-option>
            <el-option
              key="2"
              label="日结"
              :value="typeof addForm.clear_type == 'string' ? 2 + '' : 2"
            >
            </el-option>
            <el-option
              key="3"
              label="月结"
              :value="typeof addForm.clear_type == 'string' ? 3 + '' : 3"
            >
            </el-option>
            <el-option
              key="4"
              label="预充值"
              :value="typeof addForm.clear_type == 'string' ? 4 + '' : 4"
            >
            </el-option>
            <el-option
              key="5"
              label="自助提现"
              :value="typeof addForm.clear_type == 'string' ? 5 + '' : 5"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对接方式" prop="docking_mode">
          <el-select
            v-model="addForm.docking_mode"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              key="1"
              label="线上对接"
              :value="typeof addForm.docking_mode == 'string' ? 1 + '' : 1"
            >
            </el-option>
            <el-option
              key="2"
              label="线下对接"
              :value="typeof addForm.docking_mode == 'string' ? 2 + '' : 2"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应的产品" prop="describe">
          <el-input
            type="textarea"
            v-model="addForm.describe"
            show-word-limit
            maxlength="500"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.push('/supplier/configure')">
            取 消
          </el-button>
          <el-button class="theme-background-color" @click="saveSupplierInfo"
            >保 存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        id: 0,
        full_name: '',
        short_name: '',
        type: '',
        clear_type: '',
        describe: '',
        docking_mode: ''
      },
      addFormRules: {
        full_name: [
          { required: true, message: '请输入供应商全称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        short_name: [
          { required: true, message: '请输入供应商简称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        clear_type: [{ required: true, message: '请选择', trigger: 'change' }],
        docking_mode: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  created() {
    const id = this.$route.query && this.$route.query.id
    if (parseInt(id) === 0 || isNaN(id)) {
      this.$router.push('/supplier/configure')
      return
    }
    this.addForm.id = id
    this.getSupplierInfo()
  },
  methods: {
    async getSupplierInfo() {
      const { data: res } = await this.$http.post('/admin/provider/info', {
        id: this.addForm.id
      })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.addForm = JSON.parse(JSON.stringify(res.data))
      // this.addForm.full_name = res.data.full_name
      // this.addForm.short_name = res.data.short_name
      // this.addForm.type = res.data.provider_type.id
      // this.addForm.clear_type = res.data.clear_type.id
      // this.addForm.describe = res.data.describe
      // this.addForm.docking_mode = res.data.docking_mode.id
    },
    saveSupplierInfo() {
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(this.addForm)
        if (!valid) return
        const { data: res } = await this.$http.post(
          '/admin/provider/modi',
          this.addForm
        )
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.$router.push('/supplier/configure')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
  .el-select {
    width: 100%;
  }
}
</style>
